import React, {Component, Fragment} from 'react';
import {Table, Tag, Button} from 'antd';
import PropTypes from 'prop-types';

import './UserTableList.scss';

class UserTableList extends Component {
  state = {
    columns: [
      {
        title: '创建时间',
        dataIndex: 'create_at',
        key: 'create_at'
      },
      {
        title: '用户名称',
        dataIndex: 'username',
        key: 'username'
      },
      {
        title: '用户电话',
        dataIndex: 'phone',
        key: 'phone'
      },
      {
        title: '操作',
        key: 'action',
        render: (text, record) => {
          const {userEdit} = this.props;
          return <div className='actionGroup'>
            <Button size='small' onClick={() => userEdit(record)}>编辑</Button>
            <Button size='small' type='danger' onClick={() => this.props.roleDel(record)}>删除</Button>
          </div>;
        }
      }
    ]
  };

  static propTypes = {
    userListData: PropTypes.array,
    userEdit: PropTypes.func,
    roleDel: PropTypes.func
  };

  render() {
    const {columns} = this.state;
    const {userListData: data} = this.props;
    return (
      <div className='userTableList'>
        <Table columns={columns} dataSource={data} pagination={false}/>
      </div>
    );
  }

}

export default UserTableList;
